<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="visible"
      width="70%"
      :before-close="cancel"
      @open="open"
    >
      <div class="dialog-content">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="公告标题">
            <el-input v-model="form.title" style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item label="发布对象">
            <el-select
              :disabled="index === 1"
              style="width: 100px"
              v-model="form.roleId"
              placeholder="全部"
              @change="selectChanged"
            >
              <el-option
                v-for="item in roles"
                :key="item.id"
                :label="item.role"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="内容">
            <quill-editor
              ref="myQuillEditor"
              v-model="form.content"
              :options="editorOption"
              class="editor"
              @change="onEditorChange($event)"
            ></quill-editor>
          </el-form-item>
        </el-form>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="ok">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "",
    },
    index: {
      type: Number,
      default: 0,
    },
    announcementInfo: {
      type: Object,
      default: {},
    },
    options: {
      type: Array,
      default: [],
    },
  },
  components: {
    quillEditor,
  },
  data() {
    return {
      form: {
        title: "",
        content: "",
        roleId: null,
      },
      editorOption: {
        theme: "snow",
        placeholder: "请输入正文",
      },
      roles: [],
    };
  },
  methods: {
    open() {
      // console.log(this.data)
      if (this.index === 1) {
        this.form = {
          title: this.announcementInfo.notice.ntitle,
          content: this.announcementInfo.notice.ncontent,
          roleId: this.announcementInfo.notice.roleId,
        };
        console.log(this.form);
      }
      this.roles = this.options;
    },
    selectChanged(val) {
      console.log(val);
      this.form.roleId = val;
    },
    onEditorChange({ html, text }) {
      // console.log(html)
      // console.log(text)
      this.form.content = html;
      //this.form.content = text;
    },
    initForm() {
      this.form = {
        title: "",
        content: "",
        roleId: null,
      };
    },
    cancel() {
      this.$emit("cancel");
      this.initForm();
    },
    ok() {
      const formData = {
        ...this.form,
        accountId: this.$store.getters.accountId,
      };
      if (this.index === 1) {
        formData.id = this.announcementInfo.notice.id;
      }
      this.$emit("ok", formData);
      this.initForm();
    },
  },
};
</script>
